Text

For consistent typography throughout the application, we created text helper classes for headings and body text.

BaseBase

Preview

Code

<div class="slds-text-body--regular">The quick brown fox jumps over the lazy dog.</div>

This helper sets regular body copy. You usually don’t need this class since most components will inherit this globally from the body element. However, it exists if you still need to specifically set it.

Body SmallBody Smalldev ready

Preview

Code

<div class="slds-text-body--small">The quick brown fox jumps over the lazy dog.</div>

This helper sets smaller, subtler body copy. It is typically used as supportive text.

Heading LargeHeading Largedev ready

Preview

Code

<div class="slds-text-heading--large">The quick brown fox jumps over the lazy dog.</div>

These helpers give large headings. On smaller form factors, these appear the same size as medium headings, but bolder. On larger form factors, they are lighter and bigger.

These are rarely used in the app, and are reserved for extremely large text to showcase data (such as totals or stats).

Heading MediumHeading Mediumdev ready

Preview

Code

<div class="slds-text-heading--medium">The quick brown fox jumps over the lazy dog.</div>

This is typically the largest heading on a page and usually designates a page title.

Heading SmallHeading Smalldev ready

Preview

Code

<div class="slds-text-heading--small">The quick brown fox jumps over the lazy dog.</div>

Small Headings are used for smaller content areas such as list sections or card titles.

Heading LabelHeading Labeldev ready

Preview

Code

<div class="slds-text-heading--label">The quick brown fox jumps over the lazy dog.</div>

Label headers are used for small mini headers that don’t need to bring visual attention to themselves. They usually label small content areas like table columns and list sections.

Heading Label NormalHeading Label Normaldev ready

Preview

Code

<div class="slds-text-heading--label-normal">The quick brown fox jumps over the lazy dog.</div>

Label headers that are not all caps.

AlignmentAlignmentdev ready

Preview

Code

<div class="slds-text-align--left">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-align--center">The quick brown fox jumps over the lazy dog.</div>
<div class="slds-text-align--right">The quick brown fox jumps over the lazy dog.</div>

These helpers align text to the left, right, or center. Note that this is not used for layout and is only for aligning text horizontally.

LongformLongformdev ready

Preview

Code

<div class="slds-text-longform">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p>The quick brown fox jumps over the lazy dog.</p>
  <h3 class="slds-text-heading--small">Something</h3>
  <ul>
    <li>The quick brown fox jumps over the lazy dog.</li>
    <li>The quick brown fox jumps over the lazy dog.</li>
  </ul>
</div>

Almost all areas of our application have headings, paragraphs and lists reset with no additional spacing or lists reset without bullets. So we opt into spacing and bullets instead. Wrap areas of longform content to get these.

Section TitleSection Title › DefaultSection Title › ClosedSection Title › OpenSection Titledev ready

Preview

Code

<h3 class="slds-section__title">Section Title</h3>

Section Titles are interactive titles that open and close sections, typically on a form.

Section Title DividersSection Title Dividersdev ready

Preview

Code

<h3 class="slds-section-title--divider">Section Title</h3>

Section Title Dividers are titles typically for forms, and act as a visual separator for sections.

Component Overview

In our framework, all headings (h1h6) are reset to the base (body text) size, with margins and padding reset to zero. When building an enterprise application, the heading level may vary depending on the context of the component or page. Using the correct heading level is important for accessibility.

The text helper classes help maintain visual hierarchy separately from the structural markup hierarchy.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-text-body--regular
Applied to:

Outcome:

Creates the 13px regular body copy

Required:

No, optional element or modifier

Comments:

This is the base body font size and is rarely needed

.slds-text-body--small
Applied to:

Outcome:

Creates a more pale-colored 12px copy

Required:

No, optional element or modifier

Comments:

Typically used as supportive text

.slds-text-heading--large
Applied to:

Any heading

Outcome:

Very large 28px heading

Required:

No, optional element or modifier

Comments:

These are rarely used in the app and are reserved for extremely large text to showcase data (such as totals or stats).

.slds-text-heading--medium
Applied to:

Any heading

Outcome:

Large 20px heading

Required:

No, optional element or modifier

Comments:

Typically the largest heading on a page

.slds-text-heading--small
Applied to:

Any heading

Outcome:

Smaller 16px heading

Required:

No, optional element or modifier

Comments:

Used for smaller content areas such as list sections or card titles

.slds-text-heading--label
Applied to:

Any heading

Outcome:

All caps 12px heading

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like tabs and page header titles

.slds-text-heading--label-normal
Applied to:

Any heading

Outcome:

12px heading that is not all caps

Required:

No, optional element or modifier

Comments:

Usually labels small content areas like list sections.

.slds-text-longform
Applied to:

div

Outcome:

Adds default spacing and list styling within a wrapper

Required:

No, optional element or modifier

Comments:

Our application framework removes default text styling. This adds in margins to large areas

.slds-text-align--left
Applied to:

Any text

Outcome:

Aligns text left

Required:

No, optional element or modifier

Comments:

--

.slds-text-align--center
Applied to:

Any text

Outcome:

Aligns text center

Required:

No, optional element or modifier

Comments:

--

.slds-text-align--right
Applied to:

Any text

Outcome:

Aligns text right

Required:

No, optional element or modifier

Comments:

--

.slds-section
Applied to:

Outcome:

Container for a collapsable sub section through interaction with the section title

Required:

Required

Comments:

These are typically on a form, if content exists to be expanded, applying the .slds-is-open will expand .slds-section__content

.slds-section__title
Applied to:

Outcome:

Title of a section, can contain an interactive button icon to expand/collapse sub section(s)

Required:

Required

Comments:

--

.slds-section__title-action
Applied to:

Outcome:

Interactive titles with icons that open and close sections

Required:

Required

Comments:

--

.slds-section__content
Applied to:

Outcome:

Content of a section that can be expanded/collapse through interaction with the .slds-section__title-action

Required:

Required

Comments:

--

.slds-section-title
Deprecated
Applied to:

Outcome:

Interactive titles with icons that open and close sections

Required:

No, optional element or modifier

Comments:

These are typically on a form

.slds-section-title--divider
Deprecated
Applied to:

Outcome:

Titles that also act as a divider with a grey background

Required:

No, optional element or modifier

Comments:

These are typically on a form

.slds-type-focus
Applied to:

container

Outcome:

Creates a faux link with interactions

Required:

No, optional element or modifier

Comments:

This is used when an actual anchor element can not be used. For example — when a heading and button are next to each other and both need the text underline